<template lang="pug">
  div
    s-table(
      ref="table"
      reqMethod="GET"
      reqUrl="crm/web/product/page"
      :column="tableObj.column"
      :filterProps="{ showBtns: false, fields: [] }"
    )
      .table-operator(slot="table-operator" v-if="canEditFlag")
        //- el-button(v-if="canEditFlag" size="small" type="primary" @click="addHandle()") 新增
        el-button.gradientVertical(size="large" round @click="addHandle()") 新增
      template(slot="isVisible" slot-scope="text, scope")
        el-tag(size="mini" :type="text === 1 ? 'success' : 'danger'") {{text === 1 ? '可用' : '不可用'}}
      template(slot="action" slot-scope="text, scope")
        el-link(@click="addHandle(scope)" type="primary") {{canEditFlag ? '修改' : '详情'}}
        el-popconfirm(
          v-if="canEditFlag"
          title="确定删除该产品？"
          @confirm="() => deleteHandle(scope.id)"
          @onConfirm="() => deleteHandle(scope.id)"
        )
          el-link(type="danger" slot="reference") 删除
    add-drawer(:visible.sync="modalObj.visible" @getList="refreshTable" :id="modalObj.id" :values="modalObj.info" :disabled="modalObj.disabled")
</template>
<script>
import { column } from './config'
import { dictMixin } from '@/mixins'
import { productDelete } from '../../api'
import AddDrawer from './addDrawer'

export default {
  name: 'Product',
  components: {
    AddDrawer
  },
  mixins: [dictMixin],
  data () {
    return {
      tableObj: {
        column
      },
      modalObj: {
        id: '',
        visible: false,
        info: {},
        disabled: false
      }
    }
  },
  computed: {
    canEditFlag () {
      return true
      // return this.hasRole(['ROLE_BUSINESS_LEADER', 'ROLE_GARDEN_LEADER', 'ROLE_EXECUTE_LEADER'])
    }
  },
  created () {
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    // 新增/编辑
    addHandle (scope) {
      const { modalObj } = this
      this.modalObj = {
        id: scope?.id || '',
        info: scope || {},
        disabled: !this.canEditFlag,
        visible: !modalObj.visible
      }
    },
    deleteHandle (id) {
      productDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.refreshTable()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.table-operator{
  margin-bottom: 18px
}
::v-deep{
  .tableWrapper{
    padding: 0
  }
}
</style>
